<template>
  <div>
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
  
  <van-tabs>
  <van-tab v-for="index in 8" :title="'标签 ' + index">
      <!-- <div class="map">位置</div> -->
      <van-cell  class="msp" @click="showPopup">位置</van-cell>
      <van-popup position="right" :style="[{ height: '100%' },{width:'80%'}]" v-model="show">内容</van-popup>

  </van-tab>
</van-tabs>
  </div>
  
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
import { Tab, Tabs } from 'vant';
import { Popup,Cell } from 'vant';

Vue.use(Popup);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Cell);
Vue.use(NavBar);
export default {
  data() {
    return {

         show: false,
    };
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.push({path:'/main'})
    },
    showPopup() {
      this.show = true;
    },

  },
};
</script>

<style lang='scss' scoped>
/deep/.van-tabs{
    width: 100%;
    align-items: center;
    display: flex;
   .van-tabs__wrap{
    width: 80%;
    }
    .map{
        margin-left: .1rem;
        font-size: .4rem;
        height: .8rem;

        border-left: .01rem solid #eee;
        padding: .15rem;
    }
}

</style>
